<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02DOM练习</title>
</head>
<body>
   <h1>我是标题：<span class="s"></span></h1>
    <button onclick="f1()">按钮1</button>
   <hr>
   <input type="text" id="i1">
   <input type="text" id="i2">
   <button onclick="f2()">按钮2</button>
<script>
  function f1(){
    //根据类选择器找到span元素
    let spanE = document.querySelector('.s');
    //修改span元素内的文本内容
    spanE.innerHTML = '我是修改后的文本';
    spanE.innerHTML = '<table border="1px"><tr><td>姓名</td><td>年龄</td><td>性别</td></tr> ';
  }
  function f2(){
    let input1 = document.querySelector('#i1')//根据id选择器找到input元素
    let input2 = document.querySelector('#i2')//根据id值获取元素
    console.log(typeof input1.value);//从输入框中获取的内容是string类型
    console.log(input1.value+input2.value);
    let i1 = parseInt(input1.value);//类型转换
    console.log(i1,typeof i1);//number
  }

</script>
</body>
</html>